<template>
    <van-nav-bar
        title="个人信息"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <div class="user-profile">
        <van-cell  title="头像"  >
            <van-uploader :after-read="afterRead" />
        </van-cell>

        <van-cell title="昵称" is-link @click="onNickname">{{ user.nickname }}</van-cell>
        <van-cell title="生日" >{{ user.ctime }}</van-cell>
        <van-cell title="更多信息" >{{ user.info }}</van-cell>
        <van-cell title="账号安全" is-link>
            <van-tag type="primary" plain @click="onPhone">{{ user.phone }}</van-tag>
        </van-cell>
        <van-button type="primary" block round @click="logout">退出登录</van-button>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import {showToast} from "vant";
import {useRouter} from "vue-router";
import {get} from "../../util/request.js";
import {useStore} from "../../pinia/index.js";
import {postFile} from "../../util/reqeustfile.js";

const onClickLeft = () => history.back();
const show = ref(false);
const router=useRouter();
const storeUser=useStore();
let user = ref({});
const actions = [
    { name: '拍照' },
    { name: '从手机相册选择' },
];
const fileList = ref([{ url: '' }]);




const logout = () => {
    get("user/logout").then(r=>{
        router.push("/login");
        storeUser.setToken("");
        showToast(r.data);
    })
}
const onSelect = (action) => {
    // 默认情况下点击选项时不会自动收起
    // 可以通过 close-on-click-action 属性开启自动收起
    // show.value = false;
    // showToast(item.name);
    // 调用上选择图片的API
    imageInput.value.click();
};
get('user/selectById',).then(res => {
    if (res.code === 0){
        user.value=res.data
        storeUser.setUser(res.data)
        console.log(user)
        console.log(JSON.stringify(storeUser))
    } else {

    }
})
const afterRead = (file) => {
    // 此时可以自行将文件上传至服务器
    console.log(file);
    postFile("minio/upload", file.file).then(r => {
        console.log("url:" + r.data);
        fileList.value[0].url = r.data; // 修改图片地址
        showToast('上传头像成功');
        // 如果需要提交到后台，可以提交该用户的id 和 当前头像的地址，修改用户头像即可
        get("user/editAvatar", {url:r.data}).then(res => {
            if (res.code === 0) {
                user.value = res.data;
                storeUser.setUser(res.data);
                // console.log(user);
                showToast('修改头像成功');
                router.push("/my");
                console.log(JSON.stringify(storeUser));
            } else {
                // 处理错误情况
                console.error(`Error: ${res.message}`);
            }
        }).catch(error => {
            // 处理请求错误
            console.error("请求失败:", error);
        });
    }).catch(error => {
        // 处理上传文件失败
        console.error("文件上传失败:", error);
    });
};

const onNickname = () =>{
    router.push("/userNickname");
}
const onPhone = ()=>{
    router.push("/userPhone");
}
</script>

<style scoped>
.user-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.avatar-cell {
    margin-bottom: 10px;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.van-cell__title {
    font-weight: bold;
}

.van-cell__value {
    color: #666;
}

.van-button {
    margin-top: 20px;
}
</style>